<template>
  <div class="selection-box">
    <span>风险等级</span>
    <el-select v-model="riskLevel" placeholder="请选择">
      <el-option
        v-for="item in riskLevels"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-cascader
      size="large"
      class="selection-centerbox"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      :disabled="!showArea"
    >
    </el-cascader>
    <el-select v-model="routeLine" placeholder="请选择">
      <el-option
        v-for="item in routeLines"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button slot="btn" class="warning-btn" @click="search">查询</el-button>
  </div>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data";
import { getRouteGroup } from "@/api";
export default {
  name: "Selection",
  props: {
    roleOption: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      riskLevels: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "一级",
        },
        {
          value: "2",
          label: "二级",
        },
        {
          value: "3",
          label: "三级",
        },
      ],
      routeLines: [],
      riskLevel: "0",
      routeLine: 0,
      areaInfo: "",
      showArea: true,
    };
  },
  watch: {
    riskLevel(newVal) {
      this.$emit("change", newVal, this.areaInfo, this.routeLine);
    },
    routeLine(newVal) {
      this.$emit("change", this.riskLevel, this.areaInfo, newVal);
    },
  },
  created() {
    this.selectedOptions = [
      this.roleOption.provinceId + "",
      this.roleOption.cityId + "",
      this.roleOption.countryId + ""
    ];
    console.log(this.selectedOptions);
    this.getRoutetLines(this.roleOption.countryId);
    this.filterRegionData();
  },
  methods: {
    handleChange() {
      this.selectedOptions.forEach((item) => {
        this.areaInfo += CodeToText[item];
      });
      this.$emit("change", this.riskLevel, this.areaInfo, this.routeLine);
    },
    search() {
      this.$emit("search", this.riskLevel, this.routeLine, this.areaInfo);
    },
    filterRegionData() {
     switch (this.roleOption.identityType) {
        case 1: // 省局
          this.options = this.options.filter((item) => {
            return item.label == this.roleOption.province;
          });
          break;
        case 2: // 市局
          let parentOptions = null;
          this.options.forEach((item) => {
            if (item.value == this.roleOption.provinceId) {
              parentOptions = JSON.parse(JSON.stringify(item));
            }
          });
          let targetOptions = parentOptions.children.filter((item) => {
            return item.value == this.roleOption.cityId;
          });
          parentOptions.children = targetOptions;
          this.options = [JSON.parse(JSON.stringify(parentOptions))];
          break;
        case 3:
        case 4:
        default:
          this.showArea = false;
          break;
      }
    },
    getRoutetLines(id) {
      getRouteGroup({
        countryId: id,
      })
        .then((res) => {
          if (res.statusCode == 200) {
            this.routeLines = res.data.map((item) => {
              return {
                value: item.id,
                label: item.routeName,
              };
            });
            this.routeLines.unshift({
              value: 0,
              label: "全部",
            });
          }
          this.$emit(
            "getList",
            this.riskLevel,
            this.routeLine,
            this.selectedOptions
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.selection-box {
  display: flex;
  align-items: center;
  & > span {
    margin-right: 20px;
    color: #fff;
  }
  .selection-centerbox {
    margin: 0 20px;
  }
  .warning-btn {
    height: 40px;
    background: #fa6400;
    border-radius: 5px;
    padding: 0 35px;
    color: #fff;
    margin-left: 20px;
  }
}
/deep/.el-button {
  border: none;
}
</style>
